<template>
  <div>
    <div class="title"><h1>毕业生管理</h1></div>
    <div class="option">
      <el-button type="primary" style="margin-bottom: 20px" @click="handleAddGraduate">添加毕业生</el-button>
    </div>

    <div class="list" style="margin-top: 20px">
      <span>毕业生信息列表：</span>
      <el-table :data="graduateData" border style="width: 100%">
        <el-table-column prop="studentId" label="学生学号" width="180" />
        <el-table-column prop="studentName" label="姓名" />
        <el-table-column prop="major" label="专业" />
        <el-table-column prop="graduationStatus" label="毕业状态" />
        <el-table-column label="操作" width="200">
          <template #default={row}>
            <el-button type="primary" size="small" @click="handleEditGraduate(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDeleteGraduate(row.studentId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog v-model="addLogDialogVisible" title="添加毕业生" width="30%">
    <el-form :model="logForm" :rules="logRules" ref="logFormRef">
      <el-form-item label="学生号码" prop="studentNumber">
        <el-input v-model="logForm.studentNumber" placeholder="输入学生学号" />
      </el-form-item>
      <el-form-item label="学生姓名" prop="studentName">
        <el-input v-model="logForm.studentName" placeholder="输入学生姓名" />
      </el-form-item>
      <el-form-item label="专业" prop="major">
        <el-input v-model="logForm.major" placeholder="输入专业" />
      </el-form-item>
      <el-form-item label="毕业状态" prop="graduationStatus">
        <el-input v-model="logForm.graduationStatus" placeholder="输入毕业状态 0未毕业 1已毕业" type="number" />
      </el-form-item>
    </el-form>
    <template #footer>
        <span>
          <el-button @click="addLogDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitLog">确定</el-button>
        </span>
    </template>
  </el-dialog>

  <el-dialog v-model="confirmDelete" title="添加毕业生" width="30%">
    <span>确认删除吗?</span>
    <template #footer>
        <span>
          <el-button @click="confirmDelete = false">取消</el-button>
          <el-button type="primary" @click="confirm(itemToDelete)">确定</el-button>
        </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import {
  ElButton,
  ElTable,
  ElTableColumn,
  ElMessage,
  ElDialog,
  ElFormItem,
  ElInput,
  ElForm,
  ElDatePicker
} from 'element-plus';
import { DateToTimestamp, timestampToDate } from "@/util/time.utils";
import { MessageBox } from "@element-plus/icons-vue";

const logFormRef = ref(null);
const addLogDialogVisible = ref(false);
const confirmDelete = ref(false);

// 表单数据
const logForm = reactive({
  studentNumber: '',
  studentName: '',
  major: '',
  graduationStatus: '',
});

const itemToDelete = ref('');
const graduateStatus =ref('')

const submitLog = () => {
  // 表单提交逻辑
  // 校验表单
  console.log('提交的日志数据：', logForm);
  // 提交表单后，关闭对话框并清空表单数据
  addLogDialogVisible.value = false;
  if(logForm.graduationStatus=== '0') {
    logForm.graduationStatus = '未毕业';
  }
  else{
    logForm.graduationStatus = '已毕业';
  }

  graduateData.value.push({
    studentId: logForm.studentNumber,
    studentName: logForm.studentName,
    major: logForm.major,
    graduationStatus: logForm.graduationStatus,
  });

  graduateStatus.value = logForm.graduationStatus;
};

function confirm(idToDelete: string) {
  graduateData.value = graduateData.value.filter(item => item.studentId !== idToDelete);
  console.log('用户点击了确定按钮');
  ElMessage.success('删除成功');
  confirmDelete.value = false;
}

// 表单验证规则
const logRules = reactive({
  studentNumber: [
    { required: true, message: '学号不能为空', trigger: 'blur' }
  ],
  studentName: [
    { required: true, message: '学生姓名不能为空', trigger: 'blur' }
  ],
  major: [
    { required: true, message: '专业不能为空', trigger: 'blur' }
  ],
  graduationStatus: [
    { required: true, message: '毕业状态不能为空', trigger: 'blur' }
  ],
});

const graduateData = ref([
  {
    studentId: '8209220101',
    studentName: '马小双',
    major: '软件工程',
    graduationStatus: '已毕业'
  },
  {
    studentId: '8209220102',
    studentName: '吴军',
    major: '软件工程',
    graduationStatus: '已毕业'
  },
  {
    studentId: '8209220108',
    studentName: '柯毕',
    major: '软件工程',
    graduationStatus: '未毕业'
  }
  // 可以添加更多模拟毕业生数据
]);

const handleAddGraduate = () => {
  addLogDialogVisible.value = true;
  console.log('添加毕业生信息');
  // 添加毕业生信息的逻辑
};

const handleEditGraduate = (row: any) => {
  console.log('编辑毕业生信息:', row);
  logForm.studentNumber = row.studentId;
  logForm.studentName = row.studentName;
  logForm.major = row.major;
  logForm.graduationStatus = row.graduationStatus;
  addLogDialogVisible.value = true;
  graduateData.value = graduateData.value.filter(item => item.studentId !== row.studentId);
};

const handleDeleteGraduate = (idToDelete: string) => {
  confirmDelete.value = true;
  itemToDelete.value = idToDelete;
};
</script>

<style scoped>
.title {
  font-size: 20px;
  margin-bottom: 10px;
}

.option {
  margin-bottom: 20px;
}
</style>